<template>
  <div>
    <h3>子组件中的路由嵌套sonDemo2</h3>
    <p>route.params: {{ route.params }}</p>
    <!-- 在 <script setup> 中，当你使用 defineProps 定义 props 时，这些 props 被自动解构并注入到组件的作用域中。
      这意味着你可以直接访问这些 props，就像它们是本地变量一样。 -->
    <p>路由之props的id：{{ id }}</p>
    <p>路由之props的title：{{ title }}</p>
    <p>路由之props的content：{{ content }}</p>
  </div>
  </template>
  
  <script setup lang='ts'>
  import { useRoute } from 'vue-router';
  const route = useRoute()

  // 定义 props 接收 `路由props`
  const props = defineProps({
    id: Number,
    title: String,
    content: String
  })

  </script>
  
  <style scoped>
  
  </style>